<template>
	<view>
		<view class="title">
			<!-- 找回密码? -->
			<image src="../../static/logs.png" mode="widthFix"></image>
		</view>
		<view class="edit">
			<view class="cellphone">
				<image src="../../static/sj.png" mode=""></image>
				<input type="text" value="" placeholder="请输入手机号" @input="changeInput()" v-model="phone" maxlength="11"/>
				<view class="just" v-if="phonnumber">
					√
				</view>
			</view>
			<view class="verify">
				<image src="../../static/yz.png" mode=""></image>
				<input type="text" value="" placeholder="请输入验证码" v-model="codes"/>
				<view class="code" @click="captchaCountdown">{{!captchaTime?'获取验证码':captchaTime+'s'}}</view>
			</view>
		</view>
		 <view class="step" @click="code">确定</view>
		 <view class="protocol">注册代表已阅读并同意<text>《用户协议/隐私政策》</text></view>
	</view>
</template>

<script>
	import {
		sendRegCode,
		checkCode
	} from "@/nxTemp/apis/login.js"
	export default {
		data() {
			return {
				phoneNumber: '',
				captcha: '',
				captchaTime: 0,
				phone:'',
				codes:'',
				phonnumber:false,
				dete:{
					tel:'',
					code:''
				}
			}
		},
		methods:{
			/* 
				验证码倒计时
			 */
			captchaCountdown(){
				var strTemp = /^1\d{10}$/;
				if(this.phone!=""){
						if(strTemp.test(this.phone)){
							// var tel = this.phone
							// console.log(this.phone)
							sendRegCode(this.phone).then(res => {
								if(this.captchaTime > 0){
									uni.showToast({
										title:'不能重复获取',
										icon:'none'
									})
									return ;
								}else {
									this.captchaTime = 60;
									 let timer = setInterval(()=>{
									 this.captchaTime--;
									 console.log(this.captchaTime)
									 if(this.captchaTime < 1){
										 clearInterval(timer);
										 this.captchaTime = 0
									 }
									 },1000)
								}
							})
						}else{
							uni.showToast({
								title:'请填写正确的手机号',
								icon:'none'
							})
						}
					
				}else{
					uni.showToast({
						title:'手机号不能为空',
						icon:'none'
					})
				}
				
				
				
				
			},
			// 确认注册
			code(){
				this.dete.tel=this.phone
				this.dete.code=this.codes
				if(this.dete.code!=''){
					checkCode(this.dete).then(res=>{
						 // console.log(res)
						 if(res==true){
							uni.navigateTo({
							    url: 'pages/login/install?tel='+ this.dete.tel
							}); 
						 }else{
							uni.showToast({
								title:'验证码错误',
								icon:'none'
							}) 
						 }
					})
				}else{
					uni.showToast({
						title:'验证码不能为空',
						icon:'none'
					})
				}
				
				
			},
			
			//验证手机号
			changeInput(){
				var strTemp = /^1\d{10}$/;
					if(strTemp.test(this.phone)){
						this.phonnumber = true
					}else{
						this.phonnumber = false
					}
					console.log(this.phonnumber,"aaaa")
			}
		}

	}
</script>

<style>
	.title{
		display: flex;
		justify-content: center;
		padding-top: 83rpx;
	}
	.title image{
		/* height: 111rpx; */
		width: 300rpx;
		/* text-align: center; */
		display: flex;
		/* justify-content: center; */
	}

	.edit {
		margin: 0 49rpx;
		box-shadow: 0px 4rpx 28rpx 0px #D8D8D8;
		border-radius: 21rpx;
		margin-top: 86rpx;
		padding-bottom: 70rpx;
	}

	.cellphone {
		margin: 0 31rpx;
		border-bottom: 2rpx solid #CCCCCC;
		padding-top: 62rpx;
		display: flex;
		align-items: center;
	}

	.cellphone image {
		width: 61rpx;
		height: 61rpx;
		/* flex: 1; */
	}

	.cellphone input {
		margin-left: 17rpx;
		flex: 1;
		/* margin-top: 5rpx; */
	}

	.verify {
		margin: 0 31rpx;
		border-bottom: 2rpx solid #CCCCCC;
		padding-top: 36rpx;
		display: flex;
		align-items: center;
	}

	.verify image {
		width: 61rpx;
		height: 61rpx;
	}

	.verify input {
		margin-left: 17rpx;
		flex: 1;
	}

	.code {
		font-size: 30rpx;
		color: #2AAB39;
		padding-right: 25rpx;
	}
	.step{
		margin: 76rpx 49rpx 0 49rpx;
		color: #FFFFFF;
		background-color: #2AAB39;
		text-align: center;
		border-radius: 8rpx;
		font-size: 33rpx;
		padding: 33rpx 0;
		
	}
	.just{
		color: #2AAB39;
		font-size: 29rpx;
		padding-right: 67rpx;
	}
	.protocol{
		color: #B4B4B4;
		font-size: 25rpx;
		margin-top: 642rpx;
		text-align: center;
		/* position: fixed; */
		/* bottom: 100rpx; */
	}
	.protocol text{
		color: #2AAB39;
	}
</style>
